<template>
        <div class="main">
            <ul class="listTitle">
                <li v-for='item in this.$store.state.stockManage.stockTitleList'>{{item.label}}</li>
            </ul>
            <ul class="dataList" v-for='(item,index) in dataList'>
                <li>{{index + 1}}</li>
                <li @click='toMedicineInfo(index)' :title="item.drugName">{{item.drugName}}</li>
                <li>{{item.batchNumber}}</li>
                <li>{{item.productionDate | formatDate}}</li>
                <li>{{item.minPackagingNumber+item.specificationUnit+item.minPackagingUnit}}</li>
                <li @click='toChildBox(index,2)'>{{item.maxPackingNum}}</li>
                <li @click='toChildBox(index,1)'>{{item.stock}}</li>
                <li>{{item.storageWarehouseManager}}</li>
                <li>{{item.storageWarehouseDate | formatDate}}</li>
                <li>
                    <span class="operationRecord" @click='showRecord(index)' v-show='item.maxPackingNum != 0'>出库记录</span>
                    <span class="operationRecord nullOperation" v-show='item.maxPackingNum == 0'>暂未出库</span>
                </li>
            </ul>
            <p class="nullContent" v-show='nullContent'>暂无数据</p>
            <div class="block" v-show='isPagination'>
                <el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
            </div>
        </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        name: 'user',
        data() {
            return {
                dataList: [],
                currentPage: 1,
                total: 0,
                isPagination: true,
                pageSize: 10,
                nullContent: false
            }
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '-';
                } else {
                    let y, m, d, h, i, s,
                        t = new Date(parseInt(date));
                    y = t.getFullYear()
                    m = t.getMonth() + 1
                    d = t.getDate()
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
                }
            },
        },
        created: function() {
            this.getStockList(1, 10);
            this.$root.eventHub.$on('stockListSearch', (o) => {
                this.getStockList(1, 10, o);
            })
        },
        methods: {
            // 包装等级
            medicinePacking(o) {
                if(o =='1'){
                    return '/盒';
                }else if(o == '2'){
                    return '/袋';
                }else if(o == '3'){
                    return '/箱';
                }
            },
            // 药品规格
            medicineUnit(o) {
                if(o =='1'){
                    return ' 片';
                }else if(o == '2'){
                    return ' 袋';
                }else if(o == '3'){
                    return ' 粒';
                }else if(o == '4'){
                    return ' 瓶';
                }else if(o == '5'){
                    return ' 支';
                }
            },
            // 每页显示多少条
            handleSizeChange(val) {
                this.pageSize = val;
                this.getStockList(1, val);
            },
            // 分页跳转
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getStockList(val, this.pageSize);
            },
            // 获取库存列表
            getStockList(i, o, l) {
                this.$store.commit('showLoading');
                let a = {
                        pageNo: i,
                        pageSize: o,
                    },
                    list = Object.assign(a, l);

                this.getMedicineStockList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data)
                    if (data.code == 200) {
                        this.dataList = data.data.list;
                        this.total = data.data.count;
                        for (let m = 0; m < this.dataList.length; m++) {             
                            this.dataList[m].specificationUnit = this.medicineUnit(this.dataList[m].specificationUnit);
                            this.dataList[m].minPackagingUnit = this.medicinePacking(this.dataList[m].minPackagingUnit);   
                        }
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.isPagination = false;
                        } else {
                            this.isPagination = true;
                            this.nullContent = false;
                        }
                    } else {
                        this.$message(data.message);
                        this.isPagination = false;
                    }
                }).catch(msg => console.log(msg))
            },
            // 显示记录组件
            showRecord(i) {
                let storageId = this.dataList[i].id;
                this.$store.commit('toStockRecord', {
                    storageId: storageId
                });
            },
            // 显示药品信息组件
            toMedicineInfo(i) {
                let id = this.dataList[i].drugId;
                this.$store.commit('toMedicineInfo', {
                    id: id
                });
            },
            // 显示出库大包装数量/剩余库存
            toChildBox(i, o) {
                let boxType = this.dataList[i].packingLevel;
                let list = {
                    drugId: this.dataList[i].drugId,
                    storageWarehouseId: this.dataList[i].id,
                    type: o
                }
                if (o == 2) {
                    if (this.dataList[i].maxPackingNum <= 0) {
                        return
                    } else {
                        this.jumpChildBox(list, boxType, o);
                    }
                } else {
                    if (this.dataList[i].stock <= 0) {
                        return
                    } else {
                        this.jumpChildBox(list, boxType, o);
                    }
                }
            },
            jumpChildBox(list, i, o) {
                this.$store.commit('showCodeType', {
                    type: o
                });
                switch (i) {
                    case 3:
                        this.$store.commit('toBigBox', {
                            list: list
                        });
                        this.$store.commit('changeFirstCatalog', {
                            name: '大箱码'
                        });
                        return
                    case 2:
                        this.$store.commit('toMidBox', {
                            list: list
                        });
                        this.$store.commit('changeFirstCatalog', {
                            name: '中箱码'
                        });
                        return
                    case 1:
                        this.$store.commit('toLittleBox', {
                            list: list
                        });
                        this.$store.commit('changeFirstCatalog', {
                            name: '小箱码'
                        });
                        return
                }
            },
            ...mapActions(['getMedicineStockList'])
        },
        beforeDestroy: function() {
            this.$root.eventHub.$off('stockListSearch');
        }
    }

</script>
<style scoped>
    .main {
        width: 100%;
        background-color: #fff;
        margin: 10px 0 0;
    }
    
    .listTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #999999;
        font-size: 14px;
        text-align: center;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    .dataList {
        width: 100%;
        height: 56px;
        line-height: 56px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    
    .dataList {
        border-bottom: 1px solid #dddddd;
    }
    
    .dataList li,
    .listTitle li {
        border-right: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 8%;
    }
    
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 12%;
    }
    
    .dataList li:nth-child(2) {
        cursor: pointer;
        padding: 0 5px;
        color: #35C885;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 11%;
    }
    
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 8%;
    }
    
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 8%;
    }
    
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 10%;
        cursor: pointer;
    }
    
    .dataList li:nth-child(6) {
        color: #35C885;
    }
    
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 9%;
        cursor: pointer;
    }
    
    .dataList li:nth-child(7) {
        color: #35C885;
    }
    
    .listTitle li:nth-child(8),
    .dataList li:nth-child(8) {
        width: 10%;
    }
    
    .listTitle li:nth-child(9),
    .dataList li:nth-child(9) {
        width: 8%;
    }
    
    .listTitle li:nth-child(10),
    .dataList li:nth-child(10) {
        width: 16%;
        border: none;
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    li {
        float: left;
    }
    
    .clear {
        clear: both;
    }
    
    .block {
        padding: 30px 24px;
        text-align: center;
    }
    
    .dataList li span {
        cursor: pointer;
    }
    
    .operationOut {
        display: inline-block;
        color: #43DCE7;
        padding: 0 20px;
    }
    
    .operationRecord {
        display: inline-block;
        color: #35C885;
        padding: 0 20px;
    }
    
    .nullOperation {
        color: #999999;
    }

</style>
